<template>
  <div class="thuComment">
    <div class="thuComment-thumb" v-if="thumbs?.size">
      <SvgIcon
        icon-class="love"
        popper-class="thumb-icon"
        :class="{ 'thumb-icon__love': thumbs.has(selfId) }"
      />
      <span
        v-for="([key, { remark }], index) in thumbs"
        :key="key"
        class="thuComment-name"
        ><span data-name="thuRemark" @click="emits('openInfo', key, $event)">{{
          remark
        }}</span
        ><span class="thuComment-thumb__comma" v-if="index !== thumbs.size - 1"
          >、</span
        ></span
      >
    </div>
    <div class="thuComment-divider" v-if="thumbs?.size && comments?.size"></div>
    <div ref="commentRef" class="thuComment-comment" v-if="comments?.size">
      <ul>
        <li
          v-for="[key, { commenter, commenteder, commentContent }] in comments"
          :key="key"
          class="thuComment-comment__item"
          @contextmenu="
            openMenu({
              commentid: key,
              e: $event,
              dynamicid: dynamicId,
              isDelete: commenter.userId === selfId || dynamicerId === selfId,
              commenteder: commenter,
              showreplay: commenter.userId !== selfId,
            })
          "
        >
          <span
            class="thuComment-name"
            data-name="thuRemark"
            @click="emits('openInfo', commenter.userId, $event)"
            >{{ commenter.remark }}</span
          >
          <template v-if="commenteder">
            <span class="thuComment-repspan">回复</span>
            <span
              class="thuComment-name"
              data-name="thuRemark"
              @click="emits('openInfo', commenteder.userId, $event)"
              >{{ commenteder.remark }}</span
            >
          </template>
          <span>：</span>
          <span
            v-filterText="{
              content: commentContent,
              imgClass: 'dynamic-comment__emotion',
            }"
          ></span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import vFilterText from "@/directives/filterText";

const props = defineProps<{
  thumbs?: DynamicThumb;
  comments?: DynamicComment;
  selfId: string;
  dynamicerId: string;
  dynamicId: string;
  isFriend: boolean;
}>();

const emits = defineEmits<{
  (e: "openInfo", userId: string, ev: MouseEvent): void;
  (
    e: "openMenu",
    payload: {
      commentid: string;
      dynamicid: string;
      e: MouseEvent;
      isDelete: boolean;
      commenteder: Commenter;
      showreplay: boolean;
    }
  ): void;
}>();

// 是否打开评论操作菜单
const openMenu = (payload: {
  commentid: string;
  e: MouseEvent;
  isDelete: boolean;
  dynamicid: string;
  commenteder: Commenter;
  showreplay: boolean;
}) => {
  if (props.isFriend) {
    const { commenteder, e, commentid, isDelete, dynamicid, showreplay } = payload;
    e.preventDefault();
    emits("openMenu", {
      commentid,
      e,
      dynamicid,
      isDelete,
      commenteder,
      showreplay,
    });
  }
};
</script>

<style lang="scss" scoped>
.fade {
  @include fade(0.15s, ease);
}

.thuComment {
  background-color: #f8f8fd;
  border-radius: 4px;
  padding: 5px 8px;
  margin-top: 8px;
  width: 365px;
  box-sizing: border-box;
  word-break: break-all;
  font-size: 13px;

  &-thumb {
    .thumb-icon {
      color: $dynamicRemark;
      margin-right: 5px;

      &__love {
        color: $thumbColor;
      }
    }

    &__comma {
      margin-left: 3px;
    }
  }

  &-divider {
    margin: 13px 10px 10px;
    border-top: 1px solid #dcdfe6;
  }

  &-comment {
    position: relative;

    &__item {
      margin-bottom: 6px;
      padding: 0 5px;

      .dynamic-text__emotion {
        color: red;
        width: 17px !important;
        height: 17px !important;
      }
    }
  }

  &-repspan {
    margin: 0 5px;
    font-size: 14px;
  }

  &-name {
    color: $dynamicRemark;
    cursor: pointer;
  }
}
</style>
